<?php 
ini_set("memory_limit", "64M");
if(!isset($_SESSION)) 
{ 
session_start(); 
} 
include_once '../value/value_kr.php';
include_once 'checklogin.php';

unset($_SESSION['myCarmera']);
unset($_SESSION['mylistcarnum']);
unset($_SESSION['currentcarnum']);
$currentDate = date("Y-m-d");
$fromdate = $currentDate;$fh=00;$fm=00;$fs=00;

$todate = $currentDate;$th=23;$tm=59;$ts=59;

include '../connection/connection.php';
set_time_limit(0);
$listMonitor = mysql_query("select * from monitor order by Pos",$connection);
$monitor = $_REQUEST['monitor'];
$monitorname = $_REQUEST['monitorname'];
if (isset($_SESSION['monitor_menu'])) {
	$monitor = $_SESSION['monitor_menu'];
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" href="../css/jquery-ui.css" />
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript" src="../js/globalize.js"></script>
 
<style type="text/css">
/* Search */
.tbsearch1 tr td{ padding:5px 0; text-align:center}
.tbsearch1 tr td input[type=text] { text-align:center}
.tbsearch2 {margin:10px 0;}
.tbsearch2 tr td{ padding:5px; text-align:center; color:white}
.ui-widget-content{
	border:1px solid #4A4A4A;
}	
.ui-spinner-input{
	margin: 0px 20px 0px 4px;
}
.ui-dialog{
	padding: 0.1em 0.2em 0 0.2em !important;
}
.ui-dialog-content{
	padding:3px 0 0 0 !important;
}
.ui-dialog-titlebar{
	padding:0 !important;
}
</style>

<script type="text/javascript">
	//global
	$flagPopup = false;
	var flagKeypress = 0;
	
    $(function() {
        $( "#datepickerfrom" ).datepicker({
            showOn: "button",
            buttonImage: "../images/calendar.gif",
            buttonImageOnly: true,
            dateFormat: "yy-mm-dd",
            autoSize: true
        });
        $( "#datepickerto" ).datepicker({
            showOn: "button",
            buttonImage: "../images/calendar.gif",
            buttonImageOnly: true,
            dateFormat: "yy-mm-dd",
            autoSize: true
        });
    });
    $(function() {
        $( "#popupimage" ).dialog({
        	autoOpen: false,
            resizable: false,
            modal: true
        });
        $(document.body).click(function(){
            if($flagPopup==true){
            	$flagPopup = false;
            	return;
            }
        	closePopup();
        });
    });
    $.widget( "ui.spinnerhour", $.ui.spinner, {
        options: {
        	 min : 0,
     	    max : 23,
     	    showOn : 'both'
        },
     
        _parse: function( value ) {
          if ( typeof value === "string" ) {
            // already a timestamp
            if ( Number( value ) == value ) {
              return Number( value );
            }
            return  Globalize.parseInt( value );
          }
          return value;
        },
     
        _format: function( value ) {
          return Globalize.format( value, "d2" );
        }
      });
    
    $.widget( "ui.spinnermunite", $.ui.spinner, {
        options: {
        	 min : 0,
     	    max : 59,
     	    showOn : 'both'
        },
        _parse: function( value ) {
          if ( typeof value === "string" ) {
            // already a timestamp
            if ( Number( value ) == value ) {
              return Number( value );
            }
            return  Globalize.parseInt( value );
          }
          return value;
        },
     
        _format: function( value ) {
          return Globalize.format( value, "d2" );
        }
      });
     

    $(function() {
    	$("#s_hourfrom").spinnerhour();
    	$("#s_hourfrom").bind("keypress",function(event){
    		validateHour(this,event);
    	});
    	$("#s_hourto").spinnerhour();
    	$("#s_hourto").bind("keypress",function(event){
    		validateHour(this,event);
    	});
    	
    	$("#s_munitefrom").spinnermunite();
    	$("#s_munitefrom").bind("keypress",function(event){
    		validateMunite(this,event);
    	});
    	$("#s_secondfrom").spinnermunite();
    	$("#s_secondfrom").bind("keypress",function(event){
    		validateMunite(this,event);
    	});
    	$("#s_muniteto").spinnermunite();
    	$("#s_muniteto").bind("keypress",function(event){
    		validateMunite(this,event);
    	});
    	$("#s_secondto").spinnermunite();
    	$("#s_secondto").bind("keypress",function(event){
    		validateMunite(this,event);
    	});
    	
    });

 // validate
    function validateHour(ele,evt)
    {
	     if(evt.keyCode!=8)
	     {
		     var theEvent = evt || window.event;
		     var key = theEvent.keyCode || theEvent.which;
		     key = String.fromCharCode( key );
		     var regex = /[0-9]/;
			
		     if( !regex.test(key) )
		    {
		       theEvent.returnValue = false;
		
		       if(theEvent.preventDefault) theEvent.preventDefault();
		
		     }else{
		    	 //theEvent.preventDefault();
		    	 OnChangeHour(key,ele);
		    	 theEvent.returnValue = false;
		    	 if(theEvent.preventDefault) theEvent.preventDefault();
		     }
	     }
    }
    
    function validateMunite(ele,evt)
    {
	     if(evt.keyCode!=8)
	     {
		     var theEvent = evt || window.event;
		     var key = theEvent.keyCode || theEvent.which;
		     key = String.fromCharCode( key );
		     var regex = /[0-9]/;
		     if( !regex.test(key) )
		    {
		       theEvent.returnValue = false;
		
		       if(theEvent.preventDefault) theEvent.preventDefault();
		
		     }else{
		    	 OnChangeMunite(key,ele);
		    	 theEvent.returnValue = false;
		    	 if(theEvent.preventDefault) theEvent.preventDefault();
		     }
	     }
    }
    
  //onchange from
 	 function OnChangeHour(key,ele){
 	  	 	var value = $(ele).val();
 	  	 	if(value.length>2){
 	  	 		if(value.slice(0,1)==0){
 	  	 			value = value.slice(1);
 	  	 		}
 	  	 	}
 	  	 if(value.length==0){value = "0"+key;}
	  	 else{
	  		value = parseInt(value)+key;
	  	 }
       	if(value < 00){
       		$(ele).val('23');
       	}else if(value > 23 ){
       		$(ele).val('00');
       	}else{
       		$(ele).val(value);
       	}
   }
    
   function OnChangeMunite(key,ele){
   	var value = $(ele).val();
  	 	if(value.length>2){
  	 		if(value.slice(0,1)==0){
  	 			value = value.slice(1);
  	 		}
  	 	}
	  	 if(value.length==0){value = "0"+key;}
	  	 else{
	  		value = parseInt(value)+key;
	  	 }
   	if(value < 00){
   		$(ele).val('59');
   	}else if(value > 59 ){
   		$(ele).val('00');
   	}else{
   		$(ele).val(value);
   	}
   }

    function closePopup(){
    	 $( "#popupimage" ).dialog("close");
    };

    function showPopup(ele){
    	var winW = 800, winH = 600;
    	if (document.body && document.body.offsetWidth) {
    	 winW = document.body.offsetWidth;
    	 winH = document.body.offsetHeight;
    	}
    	if (document.compatMode=='CSS1Compat' &&
    	    document.documentElement &&
    	    document.documentElement.offsetWidth ) {
    	 winW = document.documentElement.offsetWidth;
    	 winH = document.documentElement.offsetHeight;
    	}
    	if (window.innerWidth && window.innerHeight) {
    	 winW = window.innerWidth;
    	 winH = window.innerHeight;
    	}
      
        url = $(ele).attr('src');
        var img = new Image();
    	img.onload = function() {
    	   //alert(this.width + 'x' + this.height);
    	   var width = this.width ;
    	   var height = this.height;
    	   var temp = parseFloat(height)/parseFloat(width);
    	   if (this.width > winW-20){
    		   width = winW-20;
    		   height = parseFloat(width)*temp;
    	   }
    	   
    	   $("#maximage").attr('width', width);
    	   $("#maximage").attr('height',height);
    	   $("#maximage").attr('src',url);
    	   $( "#popupimage" ).dialog({width : width});
    	   $flagPopup = true;
    	   $( "#popupimage" ).dialog("open");
    	   
    	}
    	img.src = $(ele).attr('src');
        
    };
</script>

<script type="text/javascript">
$(document).ready(function(){
	ScrollTable();
	ScrollTable2();
	
});
function MyResize(){
	ScrollTable();
	ScrollTable2();
}

function OnloadViewCar(selectcameraid){
	var winHf = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	temp = $("#divscroll").position();
	var winH = parseInt(winHf - temp.top - 330);
	ResetSearch();
	s_monitor = $("#s_monitor").val();
	s_mode = $("#s_mode").val();
	$('body').css('cursor','wait');
	$.ajax({url:"ajax_carnums_camera.php", data: {s_monitor:s_monitor, s_mode:s_mode, selectcameraid:selectcameraid,winH:winH}, success:function(result){
		$('body').css('cursor','auto');
		$("#tablebody tr").remove();
		$("#tablebody tbody").append(result);
		//ScrollTable();
		ScrollTableChecked(selectcameraid);
		OnSearchCarnum();
	} });
}

function ScrollTableChecked(){
	tdchecked = $("table#tablebody tr td input:checkbox:checked");
	rowpos = $(tdchecked).position();
	temp = $('table#tablebody').parent().position();
	var scrollTop = rowpos.top - temp.top;
	$('table#tablebody').parent().scrollTop(parseInt(scrollTop));
}

function ScrollTable(){
	wid = $("table#tablebody").parent().css('width');
	wid = wid.slice(0,-2)-18;
	//alert(wid);
	$("table#tablebody").css("width", wid);
	$("table#tableheader").css("width", wid);
	$('table#tablebody').parent().scrollTop(0);
	OnTRCSS();
}

function OnTRCSS(){
	$("table.tbchung tr:even").each(function(){
		$(this).css("background-color","#eff3fa");
	});
}

function ScrollTable2(){
	wid = $("table#tablebody2").parent().css('width');
	wid = wid.slice(0,-2)-18;
	$("table#tablebody2").css("width", wid);
	$("table#tableheader2").css("width", wid);
	$('table#tablebody2').parent().scrollTop(0);
	OnTRCSS();
}

function OnTRCSS(){
	$("table.tbchung tr:even").each(function(){
		$(this).css("background-color","#eff3fa");
	});
}
</script>
<script type="text/javascript">
function OnChangeMode(val){
	var winH = $("#divscroll").css("height");
	winH = winH.slice(0,-2);
	ResetSearch();
	s_monitor = $("#s_monitor").val();
	s_mode = $("#s_mode").val();
	$('body').css('cursor','wait');
	$.ajax({url:"ajax_carnums_camera.php", data: {s_monitor:s_monitor, s_mode:s_mode,winH:winH}, success:function(result){
		var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
		var response_html_fixed = result.replace(expr, '><');
		$('body').css('cursor','auto');
		$("#tablebody tr").remove();
		$("#tablebody tbody").append(response_html_fixed);
		ScrollTable();
	}});
}

function OnMonitorAll(){
	var winH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	var mh = parseInt(winH - 272 - 330);
	if(mh<200) mh = 200;
	$('body').css('cursor','wait');
	//var d = new Date();
	//var time1 = d.getTime();
	$.ajax({url:"ajax_carnums_cameraall.php", data: {s_monitor:0, s_mode:-1,winH:mh}, success:function(result){
		//var d = new Date();
		//var time2 = d.getTime();
		$('body').css('cursor','auto');
		var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
		var response_html_fixed = result.replace(expr, '><');
		//var d = new Date();
		//var time3 = d.getTime();
		$("#tablebody tr").remove();
		$("#tablebody tbody").append(response_html_fixed);
		//var d = new Date();
		//var time4= d.getTime();
		//alert(time5+" - "+time1+" - "+time2+" - "+time3+" - "+time4);
		ScrollTable();
	} });
	flagKeypress = 0;
}

function OnChangeMonitor(){
	//var d = new Date();
	//var time5 = d.getTime();
	var winH = $("#divscroll").css("height");
	winH = winH.slice(0,-2);
	ResetSearch();
	s_monitor = $("#s_monitor").val();
	s_mode = $("#s_mode").val();
	$('body').css('cursor','wait');
	//var d = new Date();
	//var time1 = d.getTime();
	$.ajax({url:"ajax_carnums_camera.php", data: {s_monitor:s_monitor, s_mode:s_mode,winH:winH}, success:function(result){
		//var d = new Date();
		//var time2 = d.getTime();
		$('body').css('cursor','auto');
		var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
		var response_html_fixed = result.replace(expr, '><');
		//var d = new Date();
		//var time3 = d.getTime();
		$("#tablebody tr").remove();
		$("#tablebody tbody").append(response_html_fixed);
		//var d = new Date();
		//var time4= d.getTime();
		//alert(time5+" - "+time1+" - "+time2+" - "+time3+" - "+time4);
		ScrollTable();
	} });
	flagKeypress = 0;
}

function OnPaggingQuickly(maxpage,ele,evt){
    if(evt.keyCode!=8)
    {
	     var theEvent = evt || window.event;
	     var key = theEvent.keyCode || theEvent.which;
	     key = String.fromCharCode( key );
	     var regex = /[0-9]/;
	     if( !regex.test(key) )
	    {	
	    	 if(evt.keyCode==13){
		         if($(ele).val()!="" && $(ele).val() <= maxpage){
			         var num = $(ele).val();
		        	 $(ele).attr('disabled', 'disabled');
		        	 $('body').css('cursor','wait');
	        		$.post('ajax_carnums_pagging.php', {pagging:num}, function(data) {
	        			$('body').css('cursor','auto');
	        			$("#mycontent").html(data);
	        			$(ele).removeAttr('disabled');
	        			ScrollTable2();
	        			
	        		});
		         }
		     }else{
			     theEvent.returnValue = false;
		    	 theEvent.preventDefault();
		     }
	    }
    }		    
}



function OnSearchCarnum(){
	var winH = $("#divscroll2").css("height");
	winH = winH.slice(0,-2);
	var hascheck = "0";
	$('.checkCamera:checkbox:checked').each(function(){
		hascheck = "1";
	});
	if(hascheck=="1"){
		$('body').css('cursor','wait');
		$.post('ajax_carnums_carnum.php?winH='+winH, $("#formCamera").serialize(), function(data) {
			var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
			var response_html_fixed = data.replace(expr, '><');
			$('body').css('cursor','auto');
			$("#tablebody2 tr").remove();
			$("#tablebody2 tbody").append(response_html_fixed);
			ScrollTable2();
			temp = "<table>"+response_html_fixed+"</table>";
			var length = $(temp).find('#cartotal').val();
			$('#searchresult').val(length);
		});
	}
	if(flagKeypress==2){
		flagKeypress = 0;
	}
}
function SelectCar(ele,carnum,id){
	$('#tablebody2 tr.select').removeClass('select');
	$(ele).addClass('select');
	
	s_carid = $(ele).attr('values');
	currentCar = s_carid;
	$.post('ajax_carnums_loadimage.php', { s_carid:s_carid }, function(datas) {
		if(datas!=""){
			$('#carnumid').val(carnum);
			var image1 = $(datas).find('#image1');
			var image2 = $(datas).find('#image2');
			var image3 = $(datas).find('#image3');
			if(image1!=""){
				$('#image1').attr('src',$(image1).html());
			}
			if(image2!=""){
				$('#image2').attr('src',$(image2).html());
			}
			if(image3!=""){
				$('#image3').attr('src',$(image3).html());
			}
		}
	});
	var gt=document.getElementById(id).checked;
	document.getElementById(id).checked = !gt;
	flagKeypress = 2;
	
}

function SelectCarcheck(id){
	var gt=document.getElementById(id).checked;
	document.getElementById(id).checked = !gt;
}

function SortCamera(ele){
	var winH = $("#divscroll").css("height");
	winH = winH.slice(0,-2);
	flag = $(ele).attr('values');
	if (flag=='0') {
		$(ele).attr('values','1');
	}else{
		$(ele).attr('values','0');
	}
	$.ajax({url:"ajax_carnums_camerasort.php", data:{flag:flag,winH:winH}, success:function(result){
		var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
		var response_html_fixed = result.replace(expr, '><');
		$("#tablebody tr").remove();
		$("#tablebody tbody").append(response_html_fixed);
		ScrollTable();
		
	}});
}

function SortCarnum(ele){
	var winH = $("#divscroll2").css("height");
	winH = winH.slice(0,-2);
	flag = $(ele).attr('values');
	if (flag=='10') {
		$(ele).attr('values','11');
	}else if(flag=='11'){
		$(ele).attr('values','10');
	}
	else if(flag=='20'){
		$(ele).attr('values','21');
	}else if(flag=='21'){
		$(ele).attr('values','20');
	}
	else if(flag=='30'){
		$(ele).attr('values','31');
	}else if(flag=='31'){
		$(ele).attr('values','30');
	}
	
	$.ajax({url:"ajax_carnums_carnumsort.php", data:{flag:flag,winH:winH}, success:function(result){
		var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
		var response_html_fixed = result.replace(expr, '><');
		$("#tablebody2 tr").remove();
		$("#tablebody2 tbody").append(response_html_fixed);
		ScrollTable2();
	}});
}

function UpdateCarnum(){
		$.ajax({url:"ajax_carnums_carnumupdate.php",data:{carnumber:$('#carnumid').val()}, success:function(result){
			$('#carnumid').val("");
			if(result){
				var index = $(result).find("#index").val();
				index = index-1;				
				var click = $(result).find("#click").html();
				var carnum = $(result).find("#carnum").html();
				var mytr = $("#tablebody2 tr:eq("+index+")");
				if(mytr){
					$(mytr).attr("onclick", click);
					$(mytr).find('td:eq(4)').html(carnum);
					var rowpos = $(mytr).position();
					var temp = $('table#tablebody2').parent().position();
					if(rowpos.top > temp.top){
						var scrollTop = rowpos.top - temp.top;
						$('table#tablebody2').parent().scrollTop(parseInt(scrollTop));
					}
				}	
			}
		}});
}

function PrintCar(){
	
	$.post('printview_session.php', $("#formCameras").serialize(), function(data) {
		if(data != "empty"){
			var WindowObject = window.open("printview.php", "PrintWindow", "outerWidth=1000;width=1024,height=650,top=50,left=50,menubar=no,location=no,directories=no,toolbars=no,titlebar=no,scrollbars=yes,status=no,resizable=yes");
		}
	});
}

function PrintCarImg(){
	
	$.post('printview_bmp_session.php', $("#formCameras").serialize(), function(data) {
		if(data != "empty"){
			var WindowObject = window.open("printview_bmp.php", "", "outerWidth=1000;width=1024,height=650,top=50,left=50,menubar=no,location=0,directories=no,toolbars=no,titlebar=no,scrollbars=yes,status=no,resizable=yes");
		}
	});
}

function DownloadImage(){
	$.post('Zip_Session.php', $("#formCameras").serialize(), function(data) {
		if(data != "empty"){
			window.location = "ZipJPG.php";
		}
	});	
}

function SaveExcel(){
	$.post('SaveExcel_Session.php', $("#formCameras").serialize(), function(data) {
		if( data != "empty"){
			if($('input#s_carnum').val()==""){
				window.location = "SaveExcel.php";	
			}else{
				window.location = "SaveExcel.php?searchvalue="+$('input#s_carnum').val();
			}
		}
	});
	
}

</script>
<script type="text/javascript">
function CheckCameraAll(){
	if($("#selectall").is(':checked')){
		$('.checkCamera:checkbox').attr('checked',true);
	
	}else{
		$('.checkCamera:checkbox').attr('checked',false);
	}
}

function selectcameracheck(){
	var hascheck = "0";
	$('.checkCamera:checkbox:checked').each(function(){
		hascheck = "1";
	});
	if(hascheck=="1"){
		$('#btnsearchcar').removeAttr('disabled');
		$('#btnsearchcar').removeClass('disable');
	}else{
		$('#btnsearchcar').attr('disabled','disabled');
		$('#btnsearchcar').addClass('disable');
	}
	alert('selectcameracheck');
}

function selectcamera(ele,id){
	$('#tablebody tr.select').removeClass('select');
	$(ele).addClass('select');
	var gt=document.getElementById(""+id).checked;
	document.getElementById(id).checked = !gt;
	flagKeypress = 1;
}

function ResetSearch(){
	$('#selectall').attr('checked',false);
}

function SelectCarnumAll(ele){
	$('.checkCarnum:checkbox').attr('checked',true);
}

function DiselectCarnumAll(ele){
	$('.checkCarnum:checkbox').attr('checked',false);
}

function isKeyPressed(event)
{
	event = event || window.event;
	var fk = 0;
	if(event.shiftKey == 1){
		fk = 1;
		event.preventDefault();
	}else if(event.keyCode==40){
		fk = 40;
		event.preventDefault();
	}else if(event.keyCode==38){
		fk = 38;
		event.preventDefault();
	}
	if(flagKeypress==1){

	}else if(flagKeypress==2){
		isKeyPressedss(fk);
	}

}
function isKeyPressedss(flag)
{
	if(flag == 1){
		var hascheck = "0";		
		$('.checkCarnum:checkbox:not(:checked)').each(function(){
			hascheck = "1";
		});
		if(hascheck=="1"){
			SelectCarnumAll("");
		}else{
			DiselectCarnumAll("");
		}
	}
	else if(flag==40){
		currenttr = $('#tablebody2 tr.select');
			if($(currenttr).find(":checkbox").is(":checked")){
				nexttr = $(currenttr).next("tr");
				if(typeof $(nexttr).html() != "undefined"){
					SelectCar(nexttr,$(nexttr).find("td:eq(4)").html(),"select"+$(nexttr).attr("values"));
					$(nexttr).find(":checkbox").attr('checked',true);
					$(currenttr).find(":checkbox").attr('checked',false);
					rowpos = $(currenttr).position();
					temp = $('#tablebody2 tr:eq(0)').position();
					var scrollTop = rowpos.top - temp.top -110;
					$('#tablebody2').parent().scrollTop(parseInt(scrollTop));
				}
			}
	}
	else if(flag==38){
		currenttr = $('#tablebody2 tr.select');
			if($(currenttr).find(":checkbox").is(":checked")){
				nexttr = $(currenttr).prev("tr");
				if(typeof $(nexttr).html() != "undefined"){
					SelectCar(nexttr,$(nexttr).find("td:eq(4)").html(),"select"+$(nexttr).attr("values"));
					$(nexttr).find(":checkbox").attr('checked',true);
					$(currenttr).find(":checkbox").attr('checked',false);
					rowpos = $(currenttr).position();
					temp = $('#tablebody2 tr:eq(0)').position();
					var scrollTop = rowpos.top - temp.top -170;
					$('#tablebody2').parent().scrollTop(parseInt(scrollTop));
				}
			}
	}
	
}

function loadpos(){
	var winHf = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	temp = $("#divscroll").position();
	var mh = parseInt(winHf - temp.top - 330);
	if(mh<200) mh = 200;
	$("#divscroll").css("height",mh);
	//
	temp = $("#divscroll2").position();
	mh = parseInt(winHf - temp.top - 275);
	if(mh<350) mh = 350;
	$("#divscroll2").css("height",mh);
}

</script>
</head>
<?php include 'show_function_popup_carcrime.php';?>

<body onkeydown="isKeyPressed(event)" onresize="MyResize()" onload="OnMonitorAll();loadpos();load_popup_carCrime();">
<p id="maylya" ><input type="hidden"  id="mayly" name="mayly" /></p>
    <?php include 'menu.php';?>
    <div id="submenu">
    	<ul class="asubmenu">
    		<li><a href="searchcarnums.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>"><?=$l_recognitionrate?></a></li>
        	<li><a href="carnums.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>" class="asubmenuselect"><?=$l_s_canums?></a></li>
            <li><a href="trace.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>" ><?=$l_s_trace?></a></li>
            <li><a href="cameras.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>" ><?=$l_camera?></a></li>
            <li><a href="searchs.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>" ><?=$l_s_searchs?></a></li>
            <li><a href="alarms.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>" ><?=$l_s_alarms?></a></li>
            <li><a href="users.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>" ><?=$l_s_users?></a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="main" style="clear:both">
    	<form id="formCamera">
    	<div style="float:left; width:37%;">            
            <div style="background:#dfdfdf; padding:10px;">
	            <div style="width: 100%">
		            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="tbsearch1">
		            	<tr>
		                    <td  style="text-align: right" width="auto"><?=$l_from?>&nbsp;<input class="intext" style="width:150px" type="text" value="<?=$fromdate?>" name="datepickerfrom" id="datepickerfrom" /></td>
		                    <td  style="text-align: right" width="90">
		                    	<input class="intext"  style="width:20px;height:20px" type="text" value="<?=$fh?>" name="s_hourfrom" id="s_hourfrom"/>
		                    </td>
		                    <td  style="text-align: center;" width="15">:</td>
		                    <td  style="text-align: right" width="52"><input class="intext" style="width:20px;height:20px" type="text" value="<?=$fm?>" name="s_munitefrom" id="s_munitefrom"/></td>
		                    <td  style="text-align: center" width="15">:</td>
		                    <td  style="text-align: right" width="52"><input class="intext"  style="width:20px;height:20px" type="text" value="<?=$fs?>" name="s_secondfrom" id="s_secondfrom"/></td>
		                </tr>  
		                <tr>
		                    <td style="text-align: right"><?=$l_to?>&nbsp;<input class="intext" style="width:150px" type="text" value="<?=$todate?>" name="datepickerto" id="datepickerto" /></td>
		                    <td style="text-align: right"><input class="intext"  style="width:20px;height:20px" type="text" value="<?=$th?>" name="s_hourto" id="s_hourto"/></td>
		                    <td style="text-align: center">:</td>
		                    <td style="text-align: right"><input class="intext"  style="width:20px;height:20px" type="text" value="<?=$tm?>" name="s_muniteto" id="s_muniteto"/></td>
		                    <td style="text-align: center">:</td>
		                    <td style="text-align: right"><input class="intext"  style="width:20px;height:20px" type="text" value="<?=$ts?>" name="s_secondto" id="s_secondto"/></td>
		                </tr>             
		            </table>
		         </div>
		         <div style="width: 100%">
		            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="tbsearch1">
		            	<tr>
		                	<td></td>
		                    <td  colspan="2" align="right" style="text-align: right;">
		                    	<?=$l_s_cartype?>&nbsp;
		                    	<select style="width:100px; height:23px; border:1px solid #474849" name="s_cartype" id="s_cartype">
		                    		<option><?=$l_s_all?></option>
		                    		<option><?=$l_s_cartype1?></option>
		                    		<option><?=$l_s_cartype2?></option>
		                    		<option><?=$l_s_cartype3?></option>
		                    		<option><?=$l_s_cartype4?></option>
		                    	</select>
		                    </td>
		                    <td  align="right" style="text-align: right;width:240px">
		                    	<?=$l_s_way?>&nbsp;
		                    	<select style="width:100px; height:23px; border:1px solid #474849" name="s_reg" id="s_reg" onchange="if(this.value==0){$('#s_cartype').attr('disabled', true)} else{$('#s_cartype').attr('disabled', false)}">
		                    		<option value="-1"><?=$l_s_all?></option>
		                    		<option  value="0"><?=$l_s_noreg?></option>
		                    		<option  value="1"><?=$l_s_isreg?></option>
		                    		
		                    	</select>
		                    </td>
		                </tr>
		                <tr>
		                	<td style="padding-left:3%"><input type="checkbox" onclick="CheckCameraAll()" id="selectall"/><?=$l_selectall?></td>
		                    <td align="right" style="text-align: right;">
		                    	<?=$l_s_mode?>&nbsp;
		                    </td>
		                    <td  align="right" style="text-align: right;width:104px">
		                    	<select style="width:100px; height:23px; border:1px solid #474849" id="s_mode" onchange="OnChangeMode()" >
		                    		<option value="-1"><?=$l_s_all?></option>
		                    		<option value="0"><?=$l_s_mode1?></option>
		                    		<option value="1"><?=$l_s_mode2?></option>
		                    	</select>
		                    </td>
		                    <td  align="right" style="text-align: right;">
		                    	<?=$l_monitor?>&nbsp;
								<select style="width:140px; height:23px; border:1px solid #474849" id="s_monitor" onchange="OnChangeMonitor()" >
									<option value="0" selected="selected"><?=$l_s_all?></option>
					    			<?php 
					    			$selectMonitor = '0';
					    			while ($rowm = mysql_fetch_array($listMonitor)){
					    						
										 ?>
										 	<option value="<?=$rowm[Monitor_ID]?>"><?=$rowm[Name]?></option>
										 <?php 
					    			}?>  
					    		</select>
							</td>
		                </tr>
		            </table>
		         </div>
           	<div class="divtheader" style="width:100%">
		    	<table cellpadding="0" cellspacing="0" border="0"  class="tbchung" style="border:none; width:100%" id="tableheader">
		               <tr>
			                   <th width="10%">&nbsp;</th>
                    			<th width="90%" class="last" style="cursor: pointer;color: #027acc" onclick="SortCamera(this)" values="0"><?=$l_name?></th> 
			                   
		               </tr>
		        </table>
    		</div>
    		<div id="divscroll" style="overflow:scroll;overflow-x:hidden;  height:200px; background-color: #ffffff">
               	<table cellpadding="0" cellspacing="0" border="0" class="tbchung" style="margin-top:0; width:100%" id="tablebody">
                	<tbody>
			    
					</tbody>
               	</table>
               </div>
            <div style="padding:10px 0">
            	<span><?=$l_carnum?> : </span><input type="text" class="intext" style="margin:0 30px; width:100px;text-align: center;" name="s_carnum" id="s_carnum"/>
            	<input type="button" class="inbtn" id="btnsearchcar" value="<?=$l_search?>" style="width:90px; height:26px" onclick="OnSearchCarnum()"/>
            </div>
            </div>
            <table class="tbsearch2">
            	<tr>
                	<td width="15%"><?=$l_carnum?></td>
                    <td width="20%"><input type="text" class="intext" id="carnumid" style="width: 100px;text-align: center;"/></td>
                    <td width="40%"><?=$l_s_note?></td>
                    <td width="20%"><input type="button" class="inbtn" value="<?=$l_s_apply?>" onclick="UpdateCarnum()"/></td>
                </tr>
            </table>            
        </div>  
        </form> 
        <form id="formCameras">    
        <div style="float:left; width:60.5%; margin-left:1.5%">
        	
        	<div style="float:left">
        	<input type="button" class="inbtn" value="<?=$l_selectall?>" onclick="SelectCarnumAll(this)" style="margin-right:15px" />
        	<input type="button" class="inbtn" value="<?=$l_diselectall?>"  onclick="DiselectCarnumAll(this)" /></div>
            <div style="float:right; margin-right:50px; color:white"><?=$l_s_searchresult?> <input type="text" class="intext" id="searchresult" readonly="readonly" /></div>
            <div class="clear"></div>
            <br />
            <div class="divtheader">
	    		<table cellpadding="0" cellspacing="0" border="0" class="tbchung" style="border:none;margin-top:0;width:100%" id="tableheader2">
	               <tr>
	               		<th width="5%">&nbsp;</th>
                    	<th width="5%">No</th>
                    	<th width="43%" style="cursor: pointer;color: #027acc" onclick="SortCarnum(this)" values="10" ><?=$l_pos?></th>
                    	<th width="25%" style="cursor: pointer;color: #027acc" onclick="SortCarnum(this)" values="20" ><?=$l_datetime?></th>
                    	<th class="last" style="cursor: pointer;color: #027acc" onclick="SortCarnum(this)" values="30" ><?=$l_carnum?></th>     
	               </tr>
	        	</table>
	        </div>
	        <div id="divscroll2" style="overflow:scroll;overflow-x:hidden; height:350px; background-color: #ffffff;">
               <table cellpadding="0" cellspacing="0" border="0" class="tbchung" style="margin-top:0;width:100%" id="tablebody2">
				    <tbody>
				    </tbody>    
               </table>
       		</div>
            
	       <div style="text-align:right; margin:15px 0">
	            <input type="button" class="inbtn" value="<?=$l_download?>" style="margin-right:10px" onclick="DownloadImage()"/>
	            <input type="button" class="inbtn" value="<?=$l_s_printexcel?>" style="margin-right:10px" onclick="SaveExcel()"/>
	            <input type="button" class="inbtn" value="<?=$l_s_printcar?>" style="margin-right:10px" onclick="PrintCar()"/>
	            <input type="button" class="inbtn" value="<?=$l_s_apply?>" onclick="PrintCarImg()"/>
	      </div>
        </div>
        </form> 
        <div class="clear"></div>
        <div style="width:100%">
        	<div style="width:33%;float:left"  align="left"><img alt="" style="clear: both;width:99%;height:210px" src="../images/noimage.jpg"   onclick="showPopup(this)"  id="image1" onerror="this.src='../images/noimage.jpg';"/></div>
        	<div style="width:33%;float:left"  align="center"><img alt="" style="clear: both;width:99%;height:210px" src="../images/noimage.jpg"   onclick="showPopup(this)" id="image2" onerror="this.src='../images/noimage.jpg';"/></div>
        	<div style="width:33%;float:left"  align="right"><img alt="" style="clear: both;width:99%;height:210px" src="../images/noimage.jpg"  onclick="showPopup(this)" id="image3" onerror="this.src='../images/noimage.jpg';"/></div>
        </div>
        
        <div style="clear: both"></div>
        <div id="popupimage" title="" style="overflow:hidden !important">
        	<img alt="" src="../images/noimage.jpg" width="100%" id="maximage" onerror="this.src='../images/noimage.jpg';">
        </div>
    </div>
    <?php
    mysql_close($connection);
    include 'show_content_popup_carcrime.php';?>
    
    
</body>     
</html>